Shopify Buy Button
Buy Button - Add Your Products to Any Website - Shopify
Shopify/buy-button-js: BuyButton.js is a highly customizable UI library for adding ecommerce functionality to any website.
Shopify Storefront Apiを使ったもの。
It's based on Shopify's Storefront API and provides the ability to retrieve products and collections from your shop, add products to a cart, and checkout.
JSDoc: Home
販売チャネルとして作成される。
その場でcheckoutまで行ける。
または、onlineStoreにリンクさせることも可能。(購入された場合は、buy buttonのチャネル購入扱いになる?)
1. ライブラリは、CDN経由で読んで
<script src="https://sdks.shopifycdn.com/js-buy-sdk/v2/latest/index.umd.min.js"></script>
StoreFront Graphqlの機能をフルに使いたい場合は、
<script src="https://sdks.shopifycdn.com/js-buy-sdk/2.0.1/index.unoptimized.umd.min.js"></script>
version指定? latestはない模様
2. で、こんな感じでstorefrontAccessTokenを読ませて clientを作成すれば、いろいろできる。
const client = ShopifyBuy.buildClient({domain: 'xxx.myshopify.com', storefrontAccessToken: 'xxx',});
3. あとは、
JSDoc: Home
商品取得、コレクションの商品取得、チェックアウト作成、チェックアウトのcustomAttributes付与。カート?へのlineItem追加・更新、削除、
チェックアウトの取得、ディスカウント付与・削除、送付先変更、
チェックアウト完了?
Completing a checkout
The simplest way to complete a checkout is to use the webUrl property that is returned when creating a checkout. This URL redirects the customer to Shopify's online checkout to complete the purchase.
webUrlとは???
設定:
デフォルトの設定は、https://github.com/Shopify/buy-button-js/blob/0b19fdeaa15e5fcb47bb67d7a4a3454bda2caa43/src/defaults/components.js